<script>
import * as echarts from 'echarts'
import BaseChartVue from '@/components/BaseChart.vue'
import { hexToRgba } from '@/lib/utils'
import { arrayGroupBy } from '@/lib/utils'
// import autoShowTip from '@/mixins/autoShowTip'
export default {
  name: 'LineAreaChart',
  components: {},
  extends: BaseChartVue,
  // mixins: [autoShowTip],
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [
            { name: '1月', value: 120, attr: '任务量' },
            { name: '2月', value: 20, attr: '任务量' },
            { name: '3月', value: 90, attr: '任务量' },
            { name: '4月', value: 40, attr: '任务量' },
            { name: '5月', value: 70, attr: '任务量' },
            { name: '6月', value: 50, attr: '任务量' },
            { name: '1月', value: 70, attr: '完成情况' },
            { name: '2月', value: 99, attr: '完成情况' },
            { name: '3月', value: 55, attr: '完成情况' },
            { name: '4月', value: 91, attr: '完成情况' },
            { name: '5月', value: 36, attr: '完成情况' },
            { name: '6月', value: 81, attr: '完成情况' },
        ]
      },
    },
    lineColor: {
      type: Array,
      default: () => ['#0aE7BE', '#FFAB48', '#0c82FF'],
    },
    isSmooth: {
      type: Boolean,
      default: false,
    },
    setInterval: {
      type: Boolean,
      default: false,
    },
    unit: {
      type: String,
      default: '',
    },
    linePoint: {
      type: String,
      default: 'circle',
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    makeOptions() {
      let dataList = arrayGroupBy(this.dataList, 'attr')
      const xAxisData = dataList.length ? dataList[0].list.map(item => item.name) : []
      const option = {
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: 'rgba(5,14,34,0.80)', //背景颜色（此时为默认色）
          borderWidth: '0', //边框宽度设置1
          textStyle: {
            color: '#fff',
          },
          formatter: '{b}<br />{a0}: {c0}单<br />{a1}: {c1}单' // 添加单位
        },
        grid: {
          left: '0',
          right: 10,
          bottom: '3%',
          top: '7%',
          containLabel: true,
        },
        // backgroundColor: '#0f375f',
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            fontSize: 12,
            textStyle: {
              color: '#888',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          show: true,
          minInterval: 1,
          splitNumber: 4,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            fontSize: 12,
            textStyle: {
                color: '#888',
            },
            formatter: '{value}' + this.unit,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['#366693'],
              type: 'dashed',
            },
          },
        },
        series: dataList.map((item, i) => {
          return {
            name: item.name,
            type: 'line',
            smooth: this.isSmooth,
            itemStyle: {
              color: '#fff',
              borderColor: this.lineColor[i],
              borderWidth: 2
            },
            symbol: this.linePoint, //标记的图形为实心圆
            symbolSize: 5, //标记的大小
            lineStyle: {
              // 设置线条的style等
              normal: {
                width: 1,
                color: this.lineColor[i], // 折线线条颜色
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: hexToRgba(this.lineColor[i], '0.8'),
                },
                {
                  offset: 1,
                  color: hexToRgba(this.lineColor[i], '0'),
                },
              ]),
            },
            data: item.list.map(item => item.value),
          }
        }),
      }
      // this.autoShowTip(xAxisData)
      // let zRender = this.baseChart && this.baseChart.getZr()
      // let that = this
      // zRender.on('mouseover', params => {
      //   that.stopShowTip()
      // })
      // zRender.on('mouseout', function () {
      //   that.autoShowTip(xAxisData)
      // })
      return option
    },
  },
}
</script>
